<template>
  <a-modal :footer="null" title="每日记录" :visible.sync="visible" @cancel="$emit('update:visible',false)" width="700px">
    <a-spin :spinning="isRefresh">
      <div class="mb20" :style="{ border: '1px solid #d9d9d9', borderRadius: '4px' }">
        <a-calendar
          v-model="currentDate"
          valueFormat="YYYY-MM-DD"
          :fullscreen="false"
          @change="change"
          :disabledDate="disabledDate"
        >
          <template slot="dateCellRender" slot-scope="value">
            <span class="bage" v-if="has(value)"></span>
            <!--            <span class="bage-yellow" v-else></span>-->
          </template>
        </a-calendar>
      </div>
      <div style="width: 100%;padding: 0 1.6rem;padding-bottom: 10px;">
        <div>
          <div class="row flex " style="justify-content: space-between">
            <span>项目名称</span>
            <span>{{ initData.projectName }}</span>
          </div>
          <div class="row mt20 flex " style="justify-content: space-between">
            <span>形象进度</span>
            <span>{{ (dateListManagerDetail && dateListManagerDetail.imageProcessTypeVO && dateListManagerDetail.imageProcessTypeVO.name)
              ? dateListManagerDetail.imageProcessTypeVO.name
              : ''
              }}</span>
          </div>
          <div class="row mt20">
            <div class="mb10">项目管理人员到岗履职情况</div>
            <b-textarea :autoSize="{minRows: 3, maxRows: 15}" :value="dateListManagerDetail.managerDutyPerf" disabled />
          </div>
          <div class="row mt20">
            <div class="mb10">分包管理人员到岗履职情况</div>
            <b-textarea :autoSize="{minRows: 3, maxRows: 15}" :value="dateListManagerDetail.subManagerDutyPerf" disabled />
          </div>
          <div class="row mt20">
            <div class="mb10">重点部位、关键环节的控制情况</div>
            <b-textarea :autoSize="{minRows: 3, maxRows: 15}" :value="dateListManagerDetail.keyPartOfControl" disabled />
          </div>
          <div class="row mt20">
            <div class="mb10">其他安全生产情况</div>
            <b-textarea :autoSize="{minRows: 3, maxRows: 15}" :value="dateListManagerDetail.others" disabled />
          </div>
          <div class="row mt20">
            <div class="mb10">安全生产隐患整改情况</div>
            <b-textarea :autoSize="{minRows: 3, maxRows: 15}" :value="dateListManagerDetail.hiddenDanger" disabled />
          </div>
        </div>
      </div>
    </a-spin>
    <div slot="footer" class="btn_box">
      <a-button type="primary" @click="$emit('update:visible',false)">关闭</a-button>
    </div>
  </a-modal>
</template>

<script>
import {
  findPmTakeShift,
  getManagerListDate,
  getMouthRecord,
  getPMMouthRecord
} from '@/api/safetySupervision/safetySystem.js'
import moment from 'moment'
import template from '@/views/construction/gantt/template.vue'

export default {
  name: 'a' + Date.now(),
  components: { template },
  props: {
    // 显隐控件
    visible: {
      type: Boolean,
      default() {
        return false
      }
    },
    initData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  watch: {
    visible(e) {
      if (e) {
        this.$nextTick(() => {
          this.currentDate = moment(new Date())
          console.log(this.initData)
          this.getData(moment(new Date()).format('YYYY-MM-DD'))
        })
      } else {
        this.isRefresh = false
      }
    }
  },
  data() {
    return {
      isRefresh: false,
      dateListManager: [],
      dateListManagerDetail: {},
      currentDate: moment(new Date())
    }
  },
  methods: {
    disabledDate(current) {
      return current && current > moment().endOf('day')
    },
    has(value) {
      return !!this.dateListManager.find(v => v.date === value.format('YYYY-MM-DD'))
    },
    change(e) {
      if (typeof e === 'object') {
        e = e.format('YYYY-MM-DD')
      }
      this.getData(e)
    },
    async getData(lDate) {
      this.isRefresh = true
      let date = new Date(lDate)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let res = await getManagerListDate({
        projectId: this.initData.projectId,
        currentDate: lDate,
        yearMonth: year + '-' + month
      })
      if (res.code === this.SUCCESS_CODE) {
        this.dateListManager = res.data
        let res2 = await findPmTakeShift({ projectId: this.initData.projectId, beginTime: lDate + ' 00:00:00' })
        if (res2.code === this.SUCCESS_CODE) {
          this.dateListManagerDetail = res2.data || {}
        }
      }
      this.isRefresh = false
    }
  }
}
</script>
<style lang="less" scoped>
.bage {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #1890ff;
  border-radius: 50%;
}

.bage-yellow {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: rgb(255, 152, 0);
  border-radius: 50%;
}

.ant-fullcalendar-value {
  border-radius: 50%;
}

.ant-modal-content {
  .ant-fullcalendar-content {
    top: 0px;
  }
}

.ant-modal-content
.ant-fullcalendar-current-week
.ant-fullcalendar-table
.ant-fullcalendar-cell
.ant-fullcalendar-value {
  border-radius: 50%;
}

.footer-box {
  display: flex;
  flex-direction: column;
  align-items: center;

  .item {
    width: 650px;
    height: 70px;
    border-bottom: 1px solid #e0dddd;
  }
}
</style>
